<template>
  <div class="newManPresent">
    <div class="name"><span class="txt">新人专享礼</span></div>
    <div class="content">
      <a href="javascript:;" class="left">
        <div class="name">新人专享礼包</div>
        <div class="imgWrap">
          <img src="http://yanxuan.nosdn.127.net/ba4d635ec94ad95b28bfab6500900659.png" alt="">
        </div>
      </a>
      <div class="right">
        <div class="rightUp">
          <a href="javascript:;" class="rightUpItem">
            <div class="title">福利社</div>
            <div class="subtitle">今日特价</div>
          </a>
          <div class="imgWrap">
            <div class="shoe"><img src="https://yanxuan.nosdn.127.net/bcaf6bbd497b40e76ca94414347be57b.png?imageView&thumbnail=200x200&quality=75" alt=""></div>
            <div class="discount">
              <div class="discountPrice">¥16.9</div>
              <div class="price">¥19.9</div>
            </div>
          </div>
        </div>
        <div class="rightDown">
          <a href="javascript:;" class="rightDownItem">
            <div class="title">新人拼团</div>
            <div class="tag">1元起包邮</div>
          </a>
          <div class="imgWrap">
            <div class="shoe"><img src="https://yanxuan.nosdn.127.net/099ebb7e766ae8a55233846556cb6480.png?imageView&thumbnail=200x200&quality=75" alt=""></div>
            <div class="discount">
              <div class="discountPrice">¥1</div>
              <div class="price">¥19</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'newMan'
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .newManPresent
    width 100%
    background #fff
    margin-top 30px
    .name
      height 90px
      text-align center
      padding 0 30px
      
      .txt
        position relative
        display inline-block
        width 160px
        height 90px
        line-height 90px
        font-size 32px
        text-align center
        
        &:before
          width 24px
          height 3px
          content ''
          position absolute
          top 44px
          left -50px
          background #333
        
        &:after
          width 24px
          height 3px
          content ''
          position absolute
          top 44px
          right -50px
          background #333
    
    .content
      height 438px
      padding 0 30px
      display float
      .left
        float left
        display block
        box-sizing border-box
        width 343px
        height 434px
        background #F9E9CF
        margin-right 4px
        .name
          box-sizing border-box
          font-size 32px
          line-height 48px
          text-align left
          height 78px
          padding 30px 0 0 30px
        .imgWrap
          width 258px
          height 257px
          box-sizing border-box
          margin 37.5px auto
          img
            width 100%
      .right
        float right
        width 343px
        height 438px
        .rightUp
          position relative
          box-sizing border-box
          padding 20px 0 0 30px
          margin 0 4px 4px 0
          height 215px
          background #FBE2D3
          .rightUpItem
            zoom 1
            .title
              width 313px
              height 48px
              font-size 32px
            .subtitle
              color #7f7f7
          .imgWrap
            position absolute
            bottom 0
            right 0
            width 200px
            height 200px
            .shoe
              img
                width 100%
            .discount
              position absolute
              top 0
              right 25px
              z-index 3
              background #F59524
              width 80px
              height 80px
              border-radius 50%
              color white
              display flex
              justify-content center
              flex-direction column
              align-items center
              .discountPrice
                font-size 24px
              .price
                font-size 20px
                text-decoration line-through
        .rightDown
          position relative
          box-sizing border-box
          padding 20px 0 0 30px
          margin 0 4px 4px 0
          height 215px
          background #FFECC2
          .rightDownItem
            zoom 1
            .title
              width 313px
              height 48px
              font-size 32px
            .tag
              width 120px
              height 32px
              border-radius 4px
              line-height 32px
              font-size 22px
              text-align center
              color #fff
              background #CBB693
          .imgWrap
            position absolute
            bottom 0
            right 0
            width 200px
            height 200px
            .shoe
              img
                width 100%
            .discount
              position absolute
              top 0
              right 25px
              z-index 3
              background #F59524
              width 80px
              height 80px
              border-radius 50%
              color white
              display flex
              justify-content center
              flex-direction column
              align-items center
              .discountPrice
                font-size 24px
              .price
                font-size 20px
                text-decoration line-through
</style>
